import React from 'react';
import { Row, Col, Divider } from 'antd';
import FlowIcon from '@/components/BizIcon/FlowIcon';
import { Link }  from 'umi';
import styles from './style.less';

const TemplateItem = ({ data, location }) => {
    const { pathname } = location;
    const { workflowTemplateVOList = [], categoryName = '' } = data;

    /* 分类标题：如：考勤流程 (3) */
    const title = React.useMemo(() => `${categoryName} (${data.count})`, [data]);

    const renderList = () =>
        workflowTemplateVOList.map(item => (
            <React.Fragment key={item.id}>
                <Row>
                    <Col span={8}>
                        <FlowIcon iconType={item.iconType} className={styles.icon} />
                        <div className={styles.iconCell}>
                            <div className={styles.title}>{item.templateName}</div>
                            <div className={styles.description} title={item.description}>
                                {item.description}
                            </div>
                        </div>
                    </Col>
                    <Col span={6}>
                        <div className={styles.title}>适用公司</div>
                        <div className={styles.description} title={item.companyName}>
                            {item.companyName}
                        </div>
                    </Col>
                    <Col span={6}>
                        <div className={styles.title}>可见范围</div>
                        <div className={styles.description} title={item.scopeValueName}>
                            {item.scopeValueName}
                        </div>
                    </Col>
                    <Col span={4}>
                        <div className={styles.action}>
                            <Link to={`${pathname}/template?id=${item.id}&action=edit`}>查看详情</Link>
                        </div>
                    </Col>
                </Row>
                <Divider style={{ margin: '16px 0' }} />
            </React.Fragment>
        ));

    return (
        <>
            <div className={styles.categoryTitle}>{title}</div>
            {renderList()}
        </>
    );
};

export default TemplateItem;
